import { useWebSocket } from './libs'
import tpl from './views/index.tpl'

export default class SocketUI {
	constructor(el){ 
		this.name = 'webSocketComponent'
		this.el = el
		this.tpl()				
				
		this.namesSelect = document.getElementById('usersSelect')				
		this.iptMessage = document.getElementById('ipt')			
		this.sendGroupBtn = el.getElementsByClassName('sendMessage')[0]
		this.chatContentNode= el.getElementsByTagName('p')[0]	
		this.ul = document.createElement('ul')
		
		this.userInfo = this.defineData()
		this.ws = useWebSocket()
		
				
	}		
	
	onSelectName(e){	
		let children = Array.from(e.target.childNodes),
		    option = children.filter(c=>{
			    return c.nodeType === 1 && c.selected === true
		    })[0]	
		
		this.userInfo['userName'] = option.value	
				
	}
	
	defineData(){
		let _obj = {
			id: Date.now(),
			message: '',
			userName: '',
			nowTime: Date()
		}	
		var userName = 'allUsers',
			message = '',
			id = Date.now(),
			nowTime = Date()
		Object.defineProperties(_obj,{
			
			'nowTime': {
				get(){
				  return nowTime
				},
				set(value){
					
				  nowTime = value
				}
			},
			'id': {
				get(){
					return id
				},
				set(value){					
				  id = value
				}
			},
			'message' :{
				get(){
					return message
				},
				set(value){					
				  message = value
				}
			},
			'userName': {				
				get(){					
					return userName
				},
				set(value){					
				  userName = value
				}
			}
		})
		
		return _obj		
	}
	
	tpl(){
		const root = this.el 
		const html = tpl()		
		root.innerHTML=html
	}
		
	bindEvents(){
		this.addUser()
		this.namesSelect.addEventListener('click', this.onSelectName.bind(this))
		this.listenMsg()
		this.sendGroupBtn.addEventListener('click',this.onBtnClick.bind(this))
	}
	
	addUser(){
		//let _self = this
		const addNameBtn = document.getElementsByClassName('addUserClick')[0]		
		
		addNameBtn.addEventListener('click',iptName.bind(this),false)		
		
		function iptName(){
			let selecter = document.getElementById('usersSelect'),	
			    option = document.createElement('option'),	
			    userName = prompt('请输入你的名字: ', 'abc' + Math.ceil(Math.random()*1000))
							
			this.userInfo['userName'] = userName.trim()				
			option.innerText = userName.trim()	
			option.selected = true					
			selecter.appendChild(option)			
		}			
		
	}
	//发送对话消息
	onBtnClick(ev){		
		const e = ev || window.event,
		      tar = e.target || e.srcElemen,			  
			  tarType = tar.type
			  
	    let msg = this.iptMessage.value,
		    info = this.userInfo
			info['message'] = msg
			info['nowTime'] = Date()
		let message ='user: ' + info.userName +' content:  ' + info.message + '   date: ' + info.nowTime	,	
		    dom = this.chatContentNode			
					   
			  if (tarType==='button'){				
				if (msg==='') return 				
				this.ws.send(message)
				this.iptMessage.value = ''
			  }		
	}
	
	listenMsg(){
		let _self = this
		this.ws.addEventListener('open', handleWsOpen,false)
		this.ws.addEventListener('close', handleWsClose,false)
		this.ws.addEventListener('error', handleWsError,false)
		this.ws.addEventListener('message', handleWsMessage,false)
		
		
		function handleWsOpen(e){
			console.log(e,'connection!')
		}
		function handleWsClose(e){
			console.log(e,'closed!')
		}
		function handleWsError(e){
			console.log(e , 'Error!')
		}
		function handleWsMessage(e){
		//	console.log(e, 'this is backserver info!',this)
			let message = e.data,
			    dom = _self.chatContentNode,			
			    li = document.createElement('li')
			li.append(message)					  
			dom.appendChild(li)	
		}
		
	}
	
	init(){			
		this.bindEvents()
	}
	
} 


	
	
